<template>
    <div class="productManager">
        <add-product-dialog :params="params" @close="close" @onConfirm="confirm" v-if="productDialogVisible" />
        <div class="buttons">
            <el-button icon="el-icon-plus" @click="addProduct">添加</el-button>
            <el-button icon="el-icon-delete" @click="confirmDelete">删除</el-button>
            <el-input style="flex:1;margin-left:300px" placeholder="请输入名称搜索" prefix-icon="el-icon-search" v-model="searchKey">
            </el-input>
        </div>
        <el-skeleton style="width:100%;margin-top:15px;padding: 0px 10px" v-if="!isShowTable" :rows="13" animated />
        <div class="productManagerTable">
            <el-table ref="goodsTable" v-if="isShowTable" tooltip-effect="dark" :data="spus">
                <el-table-column type="selection">
                </el-table-column>
                <el-table-column prop="title" width="150" label="商品名称">
                    <template slot-scope="scope">
                        <span style="min-width: 300px">{{scope.row.title}}</span>
                    </template>
                </el-table-column>
                <el-table-column width="150" min-width="150" prop="spuImage" label="商品图片">
                    <template slot-scope="scope" v-if="scope.row.skus[0].displayImage">
                        <img :src="scope.row.skus[0].displayImage" style="width:80px;height:80px" />
                    </template>
                </el-table-column>
                <el-table-column width="150" min-width="150" label="商品单价">
                    <template slot-scope="scope">
                        {{scope.row.skus[0].price}}
                    </template>
                </el-table-column>
                <el-table-column width="300" min-width="150" label="商品分类">
                    <template slot-scope="scope">
                        {{scope.row.categoryNames}}
                    </template>
                </el-table-column>
                <el-table-column width="150" min-width="150" prop="brandName" label="商品品牌">
                    <template slot-scope="scope">
                        {{scope.row.brandName}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-edit" @click="updateGood(scope.$index, scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10,50,100, 200, 300, 400]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script lang="ts">
    import { Component, Vue, Watch } from 'vue-property-decorator'
    import { namespace } from 'vuex-class'
    import AdminApiActions from '@/components/api/admin-api-actions'
    import AddProductDialog from "./product/add-product-dialog.vue";
    const goodsName = namespace("goods");
    @Component({
        components: {
            AddProductDialog
        },
    })
    export default class ProductList extends Vue {
        @goodsName.Mutation updateStatus;
        public total: any = 0;
        public searchKey: any = "";
        public scope: any = {};
        public productListData: Array < any >= new Array < any > ();
        public productDialogVisible: boolean = false;
        public formLabelWidth: any = '120px'
        public params: any = {};
        public currentPage: number = 1;
        public pageSize: number = 10;
        public spus: any = new Array < any > ();
        public isShowTable: boolean = false;
        //创建时调用
        async created() {
            await this.initPageData();
        }
        public async initPageData() {
            this.isShowTable = false;
            let apiActions = new AdminApiActions(this);
            let result: any = await apiActions.getSpuListPage({ title: this.searchKey, pager: { pageSize: this.pageSize, currentPage: this.currentPage } });
            if (!result.data) {
                this.isShowTable = true;
                return false;
            }
            this.spus = result.data.rows;
            this.total = result.data.total;
            this.$nextTick(() => {
                this.isShowTable = true;
            });
        }
        //分页发生变化
        public async handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            await this.initPageData();
        }
        //当前页发生变化
        public async handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            await this.initPageData();
        }
        //关闭
        public async close() {
            this.productDialogVisible = false;
        }

        @Watch("searchKey")
        public async searchByKey(searchText: any) {
            this.initPageData();
        }
        //修改商品
        public updateGood(index, row) {
            this.params.spuId = row.id;
            let categoryIds = new Array < any > ();
            Object.keys(row.categoryInfo).forEach(key => {
                categoryIds.push(key);
            });
            this.params.categoryIds = categoryIds.reverse();
            this.params.brandId = row.brandId;
            this.productDialogVisible = true;
        }

        public addProduct() {
            this.params.spuId = "";
            this.productDialogVisible = true;
        }
        public async confirmDelete() {
            let apiActions = new AdminApiActions(this);
            let goodsTables: any = this.$refs.goodsTable;
            let selectData: Array < any >= goodsTables.selection;
            if (selectData.length == 0) {
                this.$alert('请选择数据', '提示', {
                    confirmButtonText: '确定'
                });
                return false;
            }
            let ids = new Array < any > ();
            selectData.forEach(item => {
                ids.push(item.id);
            });
            await apiActions.deleteGoods(ids);
            await this.initPageData();
        }
        public async confirm() {
            this.isShowTable = false;
            this.productDialogVisible = false;
            await this.initPageData();
        }

    }
</script>
<style lang="less">
    .productManager {
        width: 100%;
        height: 100%;

        .buttons {
            display: flex;
        }

        .productManagerTable {
            height: calc(100% - 100px);

            .el-table {
                .cell {
                    font-size: 13px !important;
                }

                height: 100%;

                .el-table__body-wrapper {
                    height: calc(100% - 60px);
                    overflow: auto;
                }

                .el-table__body-wrapper {
                    table {
                        tbody {
                            tr {
                                height: 80px;
                            }
                        }
                    }
                }
            }

            .el-pagination {
                margin-top: 15px;
            }
        }
    }
</style>